<template>
	<div class="row">
		<div class="card-header col-md-12 text-center">
			<b><h4>基本信息</h4></b>
		</div>
		<div class="form-group col-md-12 user-first">
	        <label for="name" class="control-label col-md-2 text-right mif-height">用户名</label>
	        <div class="col-md-10">
		        <input id="name" type="text" :value="userInfo.name" class="form-control" disabled>
		    </div>
	    </div>
	    <div class="form-group col-md-12">
	        <label for="email" class="control-label col-md-2 text-right mif-height">邮箱</label>
	        <div class="col-md-10">
	        	<input id="email" type="text" :value="userInfo.email" class="form-control" disabled>
		    </div>
	    </div>
	    <div class="form-group col-md-12">
	        <label for="name" class="control-label col-md-2 text-right mif-height">昵称</label>
	        <div class="col-md-10">
		        <input type="text" placeholder="请输入昵称" autofocus="autofocus" class="form-control" ref="nick_name" :value="userInfo.nick_name">
		    </div>
	    </div>
	     <div class="form-group col-md-12">
	        <label for="name" class="control-label col-md-2 text-right mif-height">个人主页</label>
	        <div class="col-md-10">
		        <input type="text" placeholder="请输入网址" ref="website" class="form-control" :value="userInfo.website">
		    </div>
	    </div>
	    <div class="form-group col-md-12">
	        <label for="name" class="control-label col-md-2 text-right mif-height">微博主页</label>
	        <div class="col-md-10">
		        <input type="text" placeholder="请输入微博地址" ref="weibo" class="form-control"  :value="userInfo.weibo">
		    </div>
	    </div>
	    <div class="form-group col-md-12">
	        <label for="name" class="control-label col-md-2 text-right mif-height">GitHub</label>
	        <div class="col-md-10">
		        <input type="text" placeholder="请保持与github一致" ref="github" class="form-control" :value="userInfo.github">
		    </div>
	    </div>
	    <div class="form-group col-md-12">
	        <label for="name" class="control-label col-md-2 text-right mif-height">简介</label>
	        <div class="col-md-10">
		        <textarea placeholder="请输入个人简介" class="form-control" ref="description" rows="4" :value="userInfo.description"></textarea>
		    </div>
	    </div>
	    <div class="form-group col-md-12">
	    	<div class="col-md-10 col-md-offset-2">
	    		<a class="btn btn-success btn-block" @click="modifyInfo">保存</a>
	    	</div>
	    </div>
	</div>
</template>

<script>
    import {mapGetters, mapActions, mapMutations} from 'vuex'
    import {clone} from 'common/func'

	export default {
		computed: {
            ...mapGetters([
              'userInfo'
            ])
        },
		data() {
			return {
				form: {
					nick_name: '',
					website: '',
					weibo: '',
					github: '',
					description: ''
				}
			}
		},
		methods: {
			getFormData() {
				for(let key in this.form){
					this.form[key] = this.$refs[key].value
				}
				return this.form
			},
			modifyInfo() {
				this.setLoadMsg('数据提交中...')
				this.$http.patch('/modifyInfo',this.getFormData()).then((response)=>{
					this.setLoadMsg('')
					this.$message('修改成功')
					this.saveUserInfo(Object.assign({},this.userInfo, this.form))
				}).catch((error)=> {
					if (error.response) {
						this.setLoadMsg('')
						this.$message('服务器出问题了~请稍后再试')
				    }
					this.setLoadMsg('')
				})
			},
			...mapMutations({
              setLoadMsg: 'SET_LOAD_MSG'
            }),
            ...mapActions([
              'saveUserInfo'
            ])
		}
	}
</script>
<style scope>
	
</style>